
<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="提交者">
        <el-input v-model="searchParam.committer" />
      </el-form-item>
      <!-- <el-form-item label="开始时间">
        <el-input v-model="searchParam.start" />
      </el-form-item>
      <el-form-item label="截止时间">
        <el-input v-model="searchParam.end" />
      </el-form-item> -->
      <el-form-item label="统计区间">
        <el-date-picker
          v-model="searchParam.datevalue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="分支">
        <el-select v-model="searchParam.ref" placeholder="请选择分支" clearable>
          <el-option
            v-for="ref in refs"
            :key="ref"
            :label="ref"
            :value="ref"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="维度">
        <el-select v-model="searchParam.dim" placeholder="请选择维度" clearable>
          <el-option
            v-for="dim in dimlist"
            :key="dim.value"
            :label="dim.name"
            :value="dim.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
          导出Excel
        </el-button>
      </el-form-item>

      <el-popover
        style="float: right"
        placement="bottom"
        width="100"
        trigger="click"
      >
        <el-checkbox v-model="showColList.additions" label="新增行数" />
        <el-checkbox v-model="showColList.committed_times" label="提交次数" />
        <el-checkbox v-model="showColList.total" label="修改总行数" />
        <el-checkbox v-model="showColList.deletions" label="删除行数" />
        <el-button slot="reference">隐藏/显示列</el-button>
      </el-popover>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="committer" label="提交者" sortable />
      <el-table-column v-if="showColList.additions" prop="additions" label="新增行数" sortable />
      <el-table-column v-if="showColList.committed_times" prop="committed_times" label="提交次数" sortable />
      <el-table-column v-if="showColList.total" prop="total" label="修改总行数" sortable />
      <el-table-column v-if="showColList.deletions" prop="deletions" label="删除行数" sortable />
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="small" @click="historyDownload(scope.row)">导出明细</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { getHistory, getStat } from '@/api/eff/gitlab'
import { parseTime } from '@/utils/index'
import moment from 'moment'

export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      downloadLoading: false,
      searchParam: { committer: '', datevalue: [], ref: '', dim: 'commit' },
      formLabelWidth: '120px',
      datestart: '',
      dateend: '',
      showColList: {
        additions: true,
        committed_times: true,
        total: false,
        deletions: false
      },
      refs: ['T1'],
      dimlist: [{ 'name': '提交时间', 'value': 'commit' }, { 'name': '合并时间', 'value': 'merge' }]
    }
  },
  created() {
    this.initSearch()
    this.fetchData()
  },
  methods: {
    initSearch() {
      const day1 = new Date()
      const day2 = new Date()
      const week = new Date().getDay()
      day1.setDate(day1.getDate() - week - 6)
      day2.setDate(day2.getDate() - week)
      const start = moment(day1).format('YYYY-MM-DD')
      const end = moment(day2).format('YYYY-MM-DD')
      this.searchParam.datevalue = [start, end]
    },
    fetchData() {
      this.listLoading = true
      const [start, end] = this.searchParam.datevalue
      this.datestart = start
      this.dateend = end
      //   const params = Object.assign(this.searchParam, { 'start': start, 'end': end })
      const params = { 'committer': this.searchParam.committer, 'start': start, 'end': end, 'ref': this.searchParam.ref, 'dim': this.searchParam.dim }
      getStat(params).then(response => {
        this.tableData = response.data
        this.listLoading = false
      })
    },
    handleDownload() {
      this.downloadLoading = true
      const tHeader = ['提交者', '新增行数', '提交次数', '修改总行数', '删除行数']
      const filterVal = ['committer', 'additions', 'committed_times', 'total', 'deletions']
      const list = this.tableData
      const data = this.formatJson(filterVal, list)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'Git代码统计_' + this.datestart + '_' + this.dateend, // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
      this.downloadLoading = false
    },

    historyDownload(row) {
      // const params = { committed_date_after: this.datestart, committed_date_before: this.dateend, committer: row.committer, ref: this.searchParam.ref }
      const params = { start: this.datestart, end: this.dateend, committer: row.committer, ref: this.searchParam.ref, dim: this.searchParam.dim }
      getHistory(params).then(response => {
        const tHeader = ['项目', '分支', '提交ID', '提交者', '提交时间', '修改总行数', '新增行数', '删除行数', '合并时间']
        const filterVal = ['projectname', 'ref', 'shortcommitid', 'committer', 'committed_date', 'total', 'additions', 'deletions', 'merge_date']
        const list = response
        const data = this.formatJson(filterVal, list)
        import('@/vendor/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            header: tHeader, // 表头 必填
            data, // 具体数据 必填
            filename: 'Git代码明细_' + row.committer + '_' + this.datestart + '_' + this.dateend, // 非必填
            autoWidth: true, // 非必填
            bookType: 'xlsx' // 非必填
          })
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>

</style>
